<template>
  <div style="height:100%">
    <div
      class="model-column"
      v-for="item in columnInfoData"
      :key="item.id"
      :id="item.name"
    >{{item.name}}</div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    displayAlias: {
      type: Boolean,
      required: true
    },
    displayNumber: {
      type: Number,
      required: true
    },
    tableId: {
      type: Number,
      required: true
    },
    columnInfoData: {
      type: Array
    }
  },
  data() {
    return {
      modelAnalyseData: []
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getModelDataAnalyse();
  },
  methods: {
    //查询模型详细方法
    //应该有一个统一的入口 目前先临时建一个入口创建数据
    getModelDataAnalyse() {
      var _this = this;
       _this.tableId=111111;
      this.axios
        .post(this.HOST + "modelcolumn/getModelDataAnalyse", {
          tableId: _this.tableId
        })
        .then(function(res) {
          res = res.data;
          if (res.status == "1") {
           res.data.columns.forEach(element => {
             _this.drawChart(element);
           });
          } else {
            console.log(res.stackmessage);
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    drawChart(columnInfo) {
      // 基于准备好的dom，初始化echarts实例
      let myChart =this.$echarts.init(document.getElementById(columnInfo["column"]));
      // 绘制图表
      myChart.setOption({
        title: { text: columnInfo["column"] },
        yAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        xAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
.model-column {
  width: 180px;
  height: 300px;
  float: left;
}
</style>
